<template>
  <div id="app">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">首页</el-menu-item>
      <el-menu-item index="2">餐厅管理</el-menu-item>
      <el-menu-item index="3">餐厅具体信息</el-menu-item>
      <el-menu-item index="4">个人中心</el-menu-item>
    </el-menu>
    <div class="main-content">
      <router-view />
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

function handleSelect (key) {
  switch (key) {
    case '1':
      router.push({ name: 'home' })
      break
    case '2':
      router.push({ name: 'restaurant-management' })
      break
    case '3':
      router.push({ name: 'restaurant-detail' })
      break
    case '4':
      router.push({ name: 'user-profile' })
      break
    default:
      // 默认处理或错误处理
      break
  }
}
</script>

<style>
#app {
  display: flex;
  flex-direction: column; /* 改为垂直排列 */
  height: 100vh; /* 使应用高度占满整个视口 */
}

.el-menu-demo {
  flex-shrink: 0; /* 防止菜单栏收缩 */
}

.main-content {
  flex-grow: 1; /* 让内容区域占满剩余空间 */
  padding: 20px;
  overflow-y: auto; /* 如果内容超出，可以滚动 */
}
</style>
